<template>
  <div class="recommend">
    <el-row
      type="flex"
      justify="space-between"
      v-for="(item, index) in recommend_goods"
      :key="index"
    >
      <el-col :span="5" v-for="(good, index) in item" :key="index">
        <div class="goods" @click="goToGoodsDetail(good.id)">
          <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <img class="image" :src="good.url" />

            <div class="name-warp">
              <span class="name">{{ good.name }}</span>
            </div>
            <div class="price-warp">
              <span class="selling-price">￥{{ good.selling_price }}</span>
              <span class="original-price">￥{{ good.original_price }}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { selectGoodsPaging } from "@/api/goods/index.js";

export default {
  created() {
    //  页面创建时调用 created 函数
    let pageObject = { pageSize: 10, pageNumber: 1 };
    selectGoodsPaging(pageObject).then(
      (res) => {
        //console.log(res);
        let tempList = res.list;

        //  将后台传来的数据做调整
        tempList.forEach((item) => {
          let tempItem = {
            id: item.id,
            url: item.imgUrl,
            name: item.name,
            selling_price: item.price,
            original_price: item.price / 0.8,
          };

          //  调整后的数据输入到页面中
          this.recommend_goods[0].splice(item.id - 1, 1, tempItem);
        });

        //  console.log(this.recommend_goods);
      },
      (err) => {
        console.log(err);
      }
    );
  },
  data() {
    return {
      recommend_goods: [
        [
          {
            id: 1,
            url:
              "https://gma.alicdn.com/bao/uploaded/i4/35641211/O1CN01icfmbm1KogF8uGTqy_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "树莓派4B3B+Raspberry Pi4 8GB传感器开发板",
            selling_price: "255",
            original_price: "265",
          },
          {
            id: 2,
            url:
              "https://gma.alicdn.com/bao/uploaded/i2/499720121/O1CN01rX78YG1ClSXuLNex5_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "6期免息华硕ROG RTX2060S/2060 SUPER O",
            selling_price: "2399",
            original_price: "3099",
          },
          {
            id: 3,
            url:
              "https://gma.alicdn.com/bao/uploaded/i3/499720121/O1CN01vNbw7L1ClSYRkXeW7_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "AMD锐龙R5 3600/3600X处理器搭华硕重炮手 B",
            selling_price: "1839",
            original_price: "2039",
          },
          {
            id: 4,
            url:
              "https://gma.alicdn.com/bao/uploaded/i1/499720121/O1CN0131u8EH1ClSXnF5x5c_!!2-saturn_solar.png_200x200.jpg_.webp",
            name: "6期免息华硕GTX1650/1650S super O4G独",
            selling_price: "1049",
            original_price: "1399",
          },
          {
            id: 5,
            url:
              "https://gma.alicdn.com/bao/uploaded/i2/25556207/O1CN01JB7oSL1vir0nSQMtY_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "华硕PA90高达定制版I5水冷台式电脑迷你设计",
            selling_price: "11999",
            original_price: "15999",
          },
        ],
        [
          {
            id: 6,
            url:
              "https://gma.alicdn.com/bao/uploaded/i2/113221094/O1CN016rd7o71Jx5vSfD4Ea_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "有惊喜鼠标设计,操作简单方便。",
            selling_price: "359",
            original_price: "399",
          },
          {
            id: 7,
            url:
              "https://gma.alicdn.com/bao/uploaded/i4/58024954/O1CN01kL6MoY1mSyhXn092p_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "花花公子男士手套骑行摩托车冬季加绒加厚保",
            selling_price: "29.9",
            original_price: "149",
          },
          {
            id: 8,
            url:
              "https://gma.alicdn.com/bao/uploaded/i1/58024954/O1CN011a2nOz1mSygX2hzWb_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "花花公子男士冬季保暖加绒防风防水冬天加厚",
            selling_price: "38",
            original_price: "98",
          },
          {
            id: 9,
            url:
              "https://gma.alicdn.com/bao/uploaded/i2/115508798/O1CN01OD6bZa2ErXDaZwitP_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "VR眼镜 VR一体机 智能眼镜 体感3D游戏机",
            selling_price: "4699",
            original_price: "5199",
          },
          {
            id: 10,
            url:
              "https://gma.alicdn.com/bao/uploaded/i4/42357882/O1CN019kYxKl2860PzaeBfq_!!0-saturn_solar.jpg_200x200.jpg_.webp",
            name: "攀升i5 10400F/1660S高配台式吃鸡电脑主机",
            selling_price: "3799",
            original_price: "4299",
          },
        ],
      ],
    };
  },
  methods: {
    goToGoodsDetail(id) {
      //   this.$router.push("/goods?goods_id=" + id);

      //带参数跳转
      // this.$router.push({path:'/goods',query:{setid:123456}});

      // 使用 push - params 方式传递参数，参数将不会在地址栏中显示
      this.$router.push({ name: "商品", params: { goodsID: id } });
      sessionStorage.setItem("goodsID", id);
    },
  },
};
</script>

<style>
.recommend {
  margin: 20px 0px;
}

.el-card:hover {
  border: 1px solid red;
}

.image {
  border-radius: 10px;
  width: 200px;
  height: 200px;
}

.name-warp {
  margin: 10px 0px;
  height: 42px;
  line-height: 21px;
  overflow: hidden;
}

.name {
  font-size: 18px;
  color: #666666;
}

.price-warp {
  margin-top: 20px;
}

.selling-price {
  font-size: 24px;
  color: #ff5000;
}

.original-price {
  font-size: 12px;
  /* 添加删除线 */
  text-decoration: line-through;
  margin-left: 5px;
  color: #999999;
}
</style>
